<template>
	<view class="wsx-picker">
		<view @click="open()" v-if="isInput" style="position: relative;">
			<input class="wsx-picker-input" v-model="inputValue" :placeholder="placeholder"
				:placeholder-style="placeholderStyle" disabled>
			<img class="wsx-picker-img" src="./right.png"></img>
			</input>
		</view>
		<view class="wsx-picker-mask" v-if="isShow" @touchmove.stop.prevent="">
			<view class="wsx-picker-container">
				<view class="operation">
					<view class="cancel-button" @click="cancelChange">取消</view>
					<view class="operation-input">
						<input class="search-input" :placeholderStyle="placeholderStyle" v-if="isSearch"
							placeholder="请输入搜索条件" @input="searchChange">
						<img v-if="isSearch" class="wsx-picker-search" src="./search.png"></img>
						</input>
					</view>
					<view class="confirm-button" @click="confirmChange">确定</view>
				</view>
				<picker-view class="picker-search-view" :value="[selectIndex]" @change="selectChange">
					<picker-view-column>
						<view class="picker-item" v-for="(item,index) in optionsList" :key="index">
							{{valueKey? item[labelKey]:item}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 选择组件  
	 * @property {Array} options 选择数组  
	 * @property {String} labelKey 显示的对象键名 
	 * @property {String} valueKey 取值的对象键名
	 * @property {String} value 回选
	 * @property {Boolean} isSearch 是否显示搜索框
	 * @property {String} placeholder 默认请选择
	 * @property {Boolean} disabled 是否可选
	 * @property {Boolean} isInput 是否显示选择框  当为false时 需使用 ref open调用
	 */
	export default {
		name: 'wsxPickerSearch',
		data() {
			return {
				optionsList: this.options,
				selectIndex: 0,
				isShow: false,
				inputValue: '',
				placeholderStyle: 'color: #999999;font-size: 28rpx;'
			}
		},
		props: {
			value: null,
			options: {
				type: Array,
				default: () => []
			},
			labelKey: {
				type: String,
				default: "label"
			},
			valueKey: {
				type: String,
				default: "value"
			},
			isSearch: {
				type: Boolean,
				default: true
			},
			isInput: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: "请选择"
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		//监听选项
		watch: {
			options(n) {
				this.optionsList = n;
				this.dataFiltering();
			},
			value(n) {
				this.dataFiltering();
			},
		},
		mounted() {
			this.dataFiltering();
		},
		methods: {
			// 打开方法
			open() {
				if (this.disabled) {
					return false
				}
				if (this.options.length > 0) {
					this.isShow = true;
					this.optionsList = this.options;
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂无该类型数据！'
					});
				}
			},
			//选中方法
			selectChange(e) {
				this.selectIndex = e.detail.value[0];
			},
			// 取消方法
			cancelChange() {
				this.isShow = false;
				if (this.value) {
					if (this.valueKey) {
						let list = this.optionsList;
						for (let i = 0; i < list.length; i++) {
							if (list[i][this.valueKey] == this.value) {
								this.selectIndex = i;
								this.inputValue = list[i][this.labelKey]
								break;
							}
						}
					} else {
						let list = this.optionsList;
						for (let i = 0; i < list.length; i++) {
							if (list[i] == this.value) {
								this.selectIndex = i;
								this.inputValue = list[i]
								break;
							}
						}
					}
				} else {
					this.selectIndex = 0;
				}
			},
			// 确认方法
			confirmChange() {
				if (this.optionsList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择！'
					});
					return false
				} else {
					this.isShow = false;
					let obj = {};
					if (this.valueKey) {
						if (this.selectIndex != -1) {
							obj = this.optionsList[this.selectIndex];
							this.inputValue = obj[this.labelKey]
						} else {
							obj = this.optionsList[0]
							this.inputValue = this.optionsList[0]
						}
						this.$emit("input", obj[this.valueKey]);
						this.$emit("confirm", obj);
					} else {
						this.$emit("input", this.optionsList[this.selectIndex]);
						this.$emit("confirm", this.optionsList[this.selectIndex]);
					}

				}
			},

			// 过滤方法
			searchChange(e) {
				let searchValue = e.detail.value;
				if (searchValue != "") {
					searchValue = searchValue.toLowerCase();
					let oldList = this.options;
					this.optionsList = [];
					this.selectIndex = 0;
					for (let i = 0; i < oldList.length; i++) {
						let str = oldList[i];
						if (this.labelKey) {
							str = oldList[i][this.labelKey];
						} else {
							str = oldList[i];
						}
						if (str.toString().toLowerCase().indexOf(searchValue) > -1) {
							this.optionsList.push(oldList[i]);
						}
					}
				} else {
					this.optionsList = this.options;
					this.selectIndex = this.value ? this.value : -1;
					this.dataFiltering();
				}
			},
			// 数据过滤
			dataFiltering() {
				let list = this.options;
				this.optionsList = list;
				if (this.valueKey) { //看看指定了选中值的键名否，没有则默认为数据源index		
					for (let i = 0; i < list.length; i++) {
						if (list[i][this.valueKey] == this.value) {
							this.selectIndex = i;
							this.inputValue = list[i][this.labelKey]
							break;
						}
					}
				} else {
					for (let i = 0; i < list.length; i++) {
						if (list[i] == this.value) {
							this.selectIndex = i;
							this.inputValue = list[i]
							break;
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wsx-picker {
		width: 100%;
		display: grid;
		align-items: center;

	}

	.wsx-picker-input {
		pointer-events: none;
		border: 1px solid #ebebec;
		height: 70rpx;
		line-height: 70rpx;
		position: relative;
		padding: 0 24rpx;


	}

	.wsx-picker-img {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 24rpx;
		top: 18rpx;
	}

	.wsx-picker-mask {
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.wsx-picker-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		animation: picker 0.4s ease;

		.operation {
			background-color: #FFFFFF;
			height: 80rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			box-sizing: border-box;
			justify-content: space-around;
			border-bottom: 1px solid #ebebec;

			.cancel-button {
				font-size: 28rpx;
				color: #999999;
			}

			.confirm-button {
				font-size: 28rpx;
				color: #bf2827;
			}

			.operation-input {
				width: 64%;
				position: relative;
			}

			.search-input {
				height: 60rpx;
				line-height: 60rpx;
				border: 1px solid #ebebec;
				padding: 0 12rpx;
				padding-left: 60rpx;
				border-radius: 8rpx;
			}

			.wsx-picker-search {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 12rpx;
				top: 15rpx;
			}

		}

		.picker-search-view {
			background-color: #FFFFFF;
			width: 100%;
			height: 500rpx;
			left: 0;

			.picker-item {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: #ffffff;
				color: #666666;
			}
		}


	}

	.uni-picker-view-indicator {
		height: 80rpx;
		line-height: 80rpx;
	}

	@keyframes picker {
		0% {
			transform: translateY(600px);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>